<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>地图操作</title>
    <link rel="stylesheet" href="../font/iconfont.css">
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=tfD85YZlgokKmLkD4PjZB4lZFxhr4VyK"></script>

    <link rel="stylesheet" href="../css/2.css">
</head>

<body>
    <div class="map">

        <!-- 地图容器 -->
        <div id="container"></div>

        <script>
            var map = new BMapGL.Map("container"); // 创建地图实例 
            var point = new BMapGL.Point(113.823024, 34.79473); // 创建点坐标 
            map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
            map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
            map.setHeading(64.5); //设置地图旋转角度
            map.setTilt(73); //设置地图的倾斜角度

            var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
            map.addControl(scaleCtrl);
            var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
            map.addControl(zoomCtrl);

            var marker = new BMapGL.Marker(point); // 创建标注   
            map.addOverlay(marker); // 将标注添加到地图中
            map.setMapStyleV2({
                styleId: '4460912dccb85a7bcfcdd055449b0407'
            });
        </script>
    </div>
    <div class="nav1">
        <div class="nav2"><i>排水管网GIS综合应用系统</i></div>

    </div>
    <div class="nav">
        <div class="navbar"><a href="0.html">首页</a>
            <div class="tri"></div>
        </div>
        <!-- 第一个 -->
        <div class="navbar" id="navbar10"><a href="2.html">地图操作</a>
            <div class="tri"></div>
        </div>
        <!-- 第二个 -->
        <div class="navbar"><a href="3.html">管网查询</a>
            <div class="tri"></div>
        </div>
        <!-- 第三个 -->
        <div class="navbar"><a href="4.html">管网统计</a>
            <div class="tri"></div>
        </div>
        <!-- 第四个 -->
        <div class="navbar"><a href="5.html">巡检查询</a>
            <div class="tri"></div>
        </div>
        <!-- 第五个 -->
        <div class="navbar navbar1"><a href="6.html">抢修养护</a>
            <div class="tri"></div>
        </div>
        <!-- 第六个 -->
        <div class="navbar"><a href="7.html">图档管理</a>
            <div class="tri"></div>
        </div>
        <!-- 第七个 -->
        <div class="navbar"><a href="8.html">企业管理</a>
            <div class="tri"></div>
        </div>
        <!-- 第八个 -->
        <div class="navbar"><a href="9.html">窨井管理</a>
            <div class="tri"></div>
        </div>
        <!-- 第九个 -->
        <div class="navbar"><a href="10.html">泵站管理</a>
            <div class="tri"></div>
        </div>
        <!-- 第十个 -->
        <!-- 用户 -->
        <div class="shezhi"><span class="iconfont icon-shezhixitongshezhigongnengshezhishuxing"></span></div>
        <div class="yonghu "><span class="iconfont icon-yonghu">admit</span></div>
        <div class="tuichu"><span class="iconfont icon-exit-full"></span></div>
    </div>
    <div class="znz">
        <!-- 指南针 -->
        <div class="compass"></div>
        <div class="compass1"></div>
        <!-- 小房子 -->
        <div class="sousuo"><span class="iconfont icon-sousuo"></span></div>
        <div class="jia"><span class="iconfont icon-jia"></span></div>
        <div class="jian"><span class="iconfont icon-jianhao"></span></div>
        <div class="tubiao"><img src="../img/images/10010.png" alt="" width="30px" height="30px"></div>
        <div class="fangzi"><span class="iconfont icon-fangzi1"></span></div>
        <div class="quanping"><span class="iconfont icon-full-screen"></span></div>
    </div>
    <!-- 右上角小表格 -->
    <div class="big">
        <div>
            <h4 class="top"><img src="../img/images/图标.png" width="28" class="h4">&nbsp;图层选择</h4>
        </div>
        <div class="bop">
            <div class="one"><input type="checkbox" name="select">
                <div class="diyi1"></div>
                雨污合流管道
            </div>
            <div class="two"><input type="checkbox" name="select" checked>
                <div class="diyi2"></div>
                污水管道
            </div>
            <div class="three"><input type="checkbox" name="select" checked>
                <div class="diyi3"></div>
                雨水管道
            </div>
            <div class="two"><input type="checkbox" name="select" checked><img src="../img/images/10016.png" width="25">&nbsp;排污检修井
            </div>
            <div class="two"><input type="checkbox" name="select" checked><img src="../img/images/10017.png" width="25">&nbsp;排洪检修井
            </div>
            <div class="two"><input type="checkbox" name="select"><img src="../img/images/10018.png" width="25">&nbsp;检修井
            </div>
            <div class="four"><input type="checkbox" name="select"><img src="../img/images/10019.png" width="25">&nbsp;雨篦
            </div>
            <div class="one"><input type="checkbox" name="select" checked>
                <div class="circle1"></div>&nbsp;污水泵站
            </div>
            <div class="five"><input type="checkbox" name="select" checked>
                <div class="circle2"></div>&nbsp;污水处理厂
            </div>
            <div class="six"><input type="checkbox" name="select" checked><img src="../img/images/10020.png" width="25">&nbsp;企业
            </div>
        </div>

    </div>

    <!-- 全部 -->
    <div class="box1">
        <select name="quanbu"><option >全部</option></select>
    </div>
    <!-- 实践 -->
    <div class="box2">
        <select name="shijian"><option >实践</option></select>

    </div>
    <!-- 请输入编号 -->
    <div class="box3">请输入编号</div>
    <!-- 文字部分 -->
    <div class="wz">
        <div class="wenzi">显示区域</div>
        <div class="wenzi">开挖</div>
        <div class="wenzi">面积量算</div>
        <div class="wenzi">距离量算</div>
        <div class="wenzi">横截面分析</div>
        <div class="wenzi">纵截面分析</div>
        <div class="wenzi">污染源分析</div>
        <div class="wenzi">纳污范围分析</div>
        <div class="wenzi">联通检查</div>
        <div class="wenzi">多边形</div>
        <div class="wenzi">矩形</div>
        <div class="wenzi">园</div>
        <div class="wenzi">全图打印</div>
        <div class="wenzi">区域打印</div>
        <div class="wenzi">卷帘</div>
        <div class="wenzi">清除</div>
    </div>
    <!-- 右下角盒子 -->

    <div class="shang">
        <div class="dian1">管线</div>
        <div class="dian">点</div>
        <div class="dian">企业</div>
        <div class="dian2">污水处理厂</div>
        <div class="dian">泵站</div>
    </div>
    <div class="xia">
        <div class="gwlx">
            <select name="guanwang"><option >管网类型</option></select>
            <div class="qdbh">起点编号</div>
        </div>
        <div class="biaoti">
            <table align="center" cellspacing="0" cellpadding="0">
                <tr class="hang0">
                    <td>序号</td>
                    <td class="lie0">所属井段号</td>
                    <td>管道类型</td>
                    <td>操作</td>
                </tr>
                <tr class="hang1">
                    <td>1</td>
                    <td>CNZGWS143-CNZGWS144</td>
                    <td>污水</td>
                    <td class="dingwei">定位</td>
                </tr>
                <tr class="hang2">
                    <td>2</td>
                    <td>CNZGWS144-CNZGWS145</td>
                    <td>污水</td>
                    <td class="dingwei">定位</td>
                </tr>
                <tr class="hang1">
                    <td>3</td>
                    <td>CNZGWS145-CNZGWS146</td>
                    <td>污水</td>
                    <td class="dingwei">定位</td>
                </tr>
                <tr class="hang2">
                    <td>4</td>
                    <td>CNZGWS146-CNZGWS147</td>
                    <td>污水</td>
                    <td class="dingwei">定位</td>
                </tr>
                <tr class="hang1">
                    <td>5</td>
                    <td>CNZGWS149-CNZGWS150</td>
                    <td>污水</td>
                    <td class="dingwei">定位</td>
                </tr>
                <tr class="hang2">
                    <td>6</td>
                    <td>CNZGWS140-CNZGWS151</td>
                    <td>污水</td>
                    <td class="dingwei">定位</td>
                </tr>
                <tr class="hang1">
                    <td>7</td>
                    <td>CNZGWS151-CNZGWS152</td>
                    <td>污水</td>
                    <td class="dingwei">定位</td>
                </tr>
                <tr class="hang2">
                    <td>8</td>
                    <td>CNZGWS152-CNZGWS153</td>
                    <td>污水</td>
                    <td class="dingwei">定位</td>
                </tr>
                <tr class="hang1">
                    <td>9</td>
                    <td>CNZGWS137-CNZGWS139</td>
                    <td>污水</td>
                    <td class="dingwei">定位</td>
                </tr>
            </table>
        </div>
    </div>
    <div class="shuju"></div>




</body>

</html>